<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>list.jsp</title>
<style>
#boardDiv,#guestDiv,#memberDiv{
	width:800px;
	height:300px;
	margin:10px;
	padding:20px;
	border:1px solid #aaaaaa;
}

</style>
<script>
function getId(id){return document.getElementById(id)}
function getquery(id){return document.querySelector(id)} // 버전간 호환성이 떨어짐 class, id, name 등 모든 값을 가져옴

function init(){
	getquery('#btnBoardFind').onclick=function(){
		var url = 'list_ajax.jsp';
		xhr.open('get',url,true);
		xhr.send();
		rs = getId('boardDiv');
	}
	getId('btnGuestFind').onclick=function(){
		var url = '';
		xhr.open('post', url, true);
		xhr.send();
		rs = getId('guestDiv');
	}
	getId('btnMemberFind').onclick=function(){
		var url = '';
		xhr.open('post', url, true);
		xhr.send();
		rs = getId('memberDiv');
	}
	
}
xhr = new XMLHttpRequest();   // 객체 생성
xhr.onreadystatechange = myFunc;
function myFunc(){
	/* 	rs.innerHTML += '<li>status : ' + xhr.status;
		rs.innerHTML += '<li>readyState : ' + xhr.readyState; */
		if(xhr.status == 200 && xhr.readyState == 4){   // 데이터가 정상적으로 들어갔을경우
			rs.innerHTML = xhr.responseText;
		}
	}
</script>
</head>
<body>

	<div>
		<h3>게시판</h3>
		<div style='text-align:right'>
		<input type='text' id='boardFind'>
		<input type='button' value='Find' id='btnBoardFind'><br/>
		</div>
		<div id='boardDiv'></div>
	</div>
		<h3>방명록</h3>
		<div style='text-align:right'>
		<input type='text' id='boardFind'>
		<input type='button' value='Find' id='btnGuestFind'><br/>
		</div>
		<div id='guestDiv'></div>
	<div>
		<h3>회원</h3>
		<div style='text-align:right'>
		<input type='text' id='boardFind'>
		<input type='button' value='Find' id='btnMemberFind'><br/>
		</div>
		<div id='memberDiv'></div>
	</div>
	
	<div>
	</div>

<script>init();</script>
</body>
</html>